<template>
  <div class="preview-panel">
      
      <div class="preview-panel pc">
        <div class="wrapper">

          <div v-loading="loading" element-loading-text="加载中..." style="height: 100%">
            <iframe
              v-loading="loading"
              id="iframe-preview"
              :src="`/myactivity/preview/${formId}`"
              frameborder="0"
              width="100%"
              height="100%"
            ></iframe>
          </div>
        </div>
      </div>
  </div>
</template>
<script setup>
import { ref, onMounted } from 'vue'
import { useRoute } from 'vue-router'

const route = useRoute()

const dialogTableVisible = ref(false)
const previewTab = ref(1)
const formId = route.params.id || ''
const loading = ref(true)

const openDialog = () => {
  const iframePreview = document.getElementById('iframe-preview')
  if (!iframePreview) return
  iframePreview.onload = function () {
    loading.value = false
  }
}
onMounted(async () => {
  const iframePreview = document.getElementById('iframe-preview')
  if (!iframePreview) return
  iframePreview.onload = function () {
    loading.value = false
  }
})
const closedDialog = () => {
  loading.value = true
}
</script>
<style lang="scss" scoped>
@use '@/management/styles/edit-btn.scss' as *;

.preview-panel {
  width: 100%;
  .ml75 {
    margin-left: 75px;
  }

  .view-icon {
    font-size: 20px;
    height: 29px;
    line-height: 29px;
  }

  .preview-tab {
    display: flex;
    align-items: center;
    justify-content: center;

    .border-right-none {
      border-right: none;
    }

    .active {
      border-color: $primary-color;
      color: $primary-color;
    }

    .border-left-none {
      border-left: none;
    }

    &-item {
      width: 80px;
      height: 30px;
      display: flex;
      align-items: center;
      justify-content: center;
      background: #ffffff;
      border: 1px solid rgba(227, 228, 232, 1);
      cursor: pointer;
      &:hover {
        border-color: $primary-color;
        color: $primary-color;
      }
    }
  }
  .preview-panel {
    margin-top: 16px;
    height: 100%;
    width: 100%;
    &.pc {
      display: flex;
      justify-content: center;
      background: #ffffff;
      box-shadow: 0px 2px 10px -2px rgba(82, 82, 102, 0.2);
      height: 100%;
      .wrapper {
        width: 100%;
        height: 100%;
      }
    }
   
  }
  .tips-wrapper {
    display: flex;
    align-items: center;
    background: $primary-bg-color;
    color: $primary-color;
    font-size: 12px;
    padding: 2px 0;
    padding-left: 9px;

    span {
      margin-left: 5px;
    }
  }
}
</style>
